/**
 * Created by Administrator on 2017/3/14.
 */
var FinanceDetail = React.createClass({
    getInitialState:function(){
        return{
            ProDetail:this.props.ProDetail
        }
    },
    //导出PDF文件
    exportPDF:function(){
        //console.log(this.refs.getRealDom);
        this.props.exportPDF.onClick(this.refs.getRealDom.outerHTML);
    },
    render:function(){
        var _this = this, _state = _this.state,
            ProDetail = _state.ProDetail.ProjectDetail,
            FinancingDetail = _state.ProDetail.FinancingDetail;
        //剩余时间
        var RepayBegin = UFormatter.formatTime(ProDetail.RepayBegin,"yyyy/mm/dd");
        var remain = Math.ceil((new Date(RepayBegin) - new Date()) / 1000 / 60 / 60 / 24);
        if(remain < 0)
            remain = 0;
        //数字格式化
        var TotalRepayment = UFormatter.formatMoney(Number(FinancingDetail.TotalRepayment),2),
            IAmount = UFormatter.formatMoney(Number(ProDetail.IAmount),2),
            FinancingCost = UFormatter.formatMoney(Number(FinancingDetail.FinancingCost),2);
        return(
            <div className="invest-detail">
                <div ref="getRealDom">
                    <h1>
                        {ProDetail.ProjectName}
                        <span className={"tag " + ProDetail.F_StatusName.className}>
                            {
                                ProDetail.F_Status == 1 ? "还款中" :
                                    ProDetail.F_Status == 2 ? "还款完成" :
                                        ProDetail.F_Status == 3 ? "融资完成" :
                                            ProDetail.F_Status == 4 ? "投标中" :
                                                ProDetail.F_Status == 5 ? "预热中" :
                                                    ProDetail.F_Status == 6 ? "项目流标" : ""
                            }
                        </span>
                        {ProDetail.F_Status == 1 ?
                            <span className="countdown-data"><i className="iconfont icon-clock"></i>距离还款日还有：<b className="fc-main">{remain}天</b></span> : ""
                        }
                    </h1>
                    <div className="money">
                        <ul className="clearfix">
                            <li className="col-1">
                                <p className="fc-main"><b className="fs42">{TotalRepayment}</b>元</p>
                                <p className="fc-light">到期应还资金总额</p>
                            </li>
                            <li className="col-2">
                                <p>还款日期<b>{ProDetail.RepayBegin}</b></p>
                                <p>借款人<b>{this.state.ProDetail.CallbackAccount.AccountName}</b></p>
                            </li>
                        </ul>
                    </div>
                    <div className="info">
                        <ul className="clearfix">
                            <li><p><b>{IAmount}</b>元</p>
                                <p className="fc-light">融资金额</p></li>
                            <li><p className="fc-main"><b>{FinancingCost}</b>元</p>
                                <p className="fc-light">融资成本</p></li>
                            <li><p className="fc-main"><b>{ProDetail.FinanceRate}</b>%</p>
                                <p className="fc-light">融资利率</p></li>
                        </ul>
                    </div>
                    <div className="pro-data">
                        <ul className="clearfix">
                            <li>融资期限：{ProDetail.Duration+"天"}</li>
                            <li>起息日：{ProDetail.ValueBegin}</li>
                            <li>到期日：{ProDetail.RepayBegin}</li>
                        </ul>
                    </div>
                    <div className="bank-back clearfix">
                        <label className="f-left">回款账户：</label>
                        <div className="input f-left">
                            <span className={"bank-logo "+this.state.ProDetail.CallbackAccount.BankLogo}></span>
                            <span>{this.state.ProDetail.CallbackAccount.AccountNo}</span>
                        </div>
                    </div>
                </div>
                <span className="angle angle-right-bottom"></span>
            </div>
        )
    }
});

var Root = React.createClass({
    getInitialState:function(){
        return{
            ProDetail:PageDM.ProDetail.value,
            realNameInfo:PageDM.realNameInfo.value
        }
    },
    componentDidMount: function(){
        var _this = this;
        var PageDM = window.PageDM;
        UEventHub.emit("pageLoad","hello world!");

        //项目详情
        UEventHub.on(PageDM.ProDetail.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                ProDetail:v
            })
        });
        //个人实名信息
        UEventHub.on(PageDM.realNameInfo.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                realNameInfo:v
            })
        });
    },
    render: function () {

        return (
            <div>
                <div className="mod-account container">
                    <div className="account" style={{width:"870px",margin:"0 auto",minHeight:"auto"}}>
                        <FinanceDetail url={PageDM.URL} ProDetail={this.state.ProDetail} exportPDF={PageDM.exportPDF} printBtn={PageDM.printBtn}/>
                        <div style={{textAlign:"center",marginTop:"20px"}}>
                            <button id="printBtn" className="ucs-btn ucs-btn-confirm" onClick={PageDM.printBtn.onClick}>打印</button>
                        </div>
                    </div>
                    <div className="clear"></div>
                </div>

            </div>
        )
    }
});
ReactDOM.render(<Root/>, document.getElementById('giraffe'));